<!-- 多维检索中心 - 主页面 -->
<template>
  <div class="multi-dimensional-search">
    <!-- 顶部标题栏 -->
    <div class="search-header">
      <div class="header-left">
        <h1 class="page-title">
          <el-icon class="title-icon"><Search /></el-icon>
          多维检索中心
        </h1>
        <div class="subtitle">
          <el-tag type="info" size="small">智能化</el-tag>
          <el-tag type="success" size="small">全频段</el-tag>
          <el-tag type="warning" size="small">实时态势</el-tag>
        </div>
      </div>

      <div class="header-actions">
        <el-button-group class="action-group">
          <el-button size="small" @click="exportResults">
            <el-icon><Download /></el-icon>
            导出结果
          </el-button>
          <el-button size="small" @click="saveQuery">
            <el-icon><Collection /></el-icon>
            保存查询
          </el-button>
          <el-button size="small" type="primary" @click="startRealTimeSearch">
            <el-icon><VideoPlay /></el-icon>
            实时检索
          </el-button>
        </el-button-group>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="search-content">
      <!-- 左侧搜索控制面板 -->
      <el-aside :width="leftPanelWidth" class="search-panel">
        <!-- 三合一搜索栏 -->
        <SearchBar
          @search="handleKeywordSearch"
          @advanced-search="handleAdvancedSearch"
          @intelligent-search="handleIntelligentSearch"
        />

        <!-- 时空过滤器 -->
        <SpatialTemporalFilter
          @spatial-change="handleSpatialChange"
          @temporal-change="handleTemporalChange"
          @filter-apply="handleFilterApply"
        />

        <!-- 检索统计 -->
        <div class="search-stats">
          <div class="stats-header">
            <el-icon><DataAnalysis /></el-icon>
            <span class="stats-title">检索统计</span>
          </div>
          <div class="stats-content">
            <div class="stat-item">
              <span class="stat-label">总数据量:</span>
              <span class="stat-value">{{ formatNumber(totalDataCount) }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">匹配结果:</span>
              <span class="stat-value primary">{{ formatNumber(matchedCount) }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">检索耗时:</span>
              <span class="stat-value">{{ searchTime }}ms</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">覆盖频段:</span>
              <span class="stat-value">{{ coverageRange }}</span>
            </div>
          </div>
        </div>

        <!-- 面板调整器 -->
        <div
          class="panel-resizer left-resizer"
          @mousedown="startResize('left', $event)"
        ></div>
      </el-aside>

      <!-- 中央地图区域 -->
      <el-main class="map-area">
        <MapContainer
          :draw-mode="currentDrawMode"
          :spatial-filter="spatialFilter"
          @coordinates-change="handleCoordinatesChange"
          @draw-complete="handleDrawComplete"
          @area-selected="handleAreaSelected"
        />

        <!-- 地图覆盖层 - 检索结果可视化 -->
        <div class="search-overlay">
          <!-- 实时状态指示器 -->
          <div class="realtime-indicator" :class="{ active: isRealTimeMode }">
            <div class="indicator-dot"></div>
            <span class="indicator-text">
              {{ isRealTimeMode ? '实时检索中' : '静态模式' }}
            </span>
          </div>

          <!-- 结果统计浮窗 -->
          <div v-if="showResultsOverlay" class="results-overlay">
            <div class="overlay-header">
              <span class="overlay-title">检索结果分布</span>
              <el-icon class="close-icon" @click="showResultsOverlay = false">
                <Close />
              </el-icon>
            </div>
            <div class="overlay-content">
              <div class="result-type" v-for="type in resultTypes" :key="type.id">
                <div class="type-indicator" :style="{ background: type.color }"></div>
                <span class="type-name">{{ type.name }}</span>
                <span class="type-count">{{ type.count }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-main>

      <!-- 右侧结果展示面板 -->
      <el-aside :width="rightPanelWidth" class="results-panel">
        <el-tabs v-model="rightActiveTab" stretch class="panel-tabs">
          <!-- 检索结果列表 -->
          <el-tab-pane label="检索结果" name="results">
            <div class="results-container">
              <div class="results-header">
                <div class="results-count">
                  共找到 <span class="count-number">{{ searchResults.length }}</span> 条结果
                </div>
                <div class="results-actions">
                  <el-select v-model="sortBy" size="small" placeholder="排序方式">
                    <el-option label="时间倒序" value="time_desc" />
                    <el-option label="时间正序" value="time_asc" />
                    <el-option label="信号强度" value="strength" />
                    <el-option label="相关度" value="relevance" />
                  </el-select>
                </div>
              </div>

              <div class="results-list">
                <div
                  v-for="result in paginatedResults"
                  :key="result.id"
                  class="result-item"
                  :class="{ active: selectedResult?.id === result.id }"
                  @click="selectResult(result)"
                >
                  <div class="result-header">
                    <div class="result-type-badge" :class="result.type">
                      {{ getTypeLabel(result.type) }}
                    </div>
                    <div class="result-time">{{ formatTime(result.timestamp) }}</div>
                  </div>
                  
                  <div class="result-content">
                    <div class="result-title">{{ result.title }}</div>
                    <div class="result-details">
                      <span class="detail-item">频率: {{ result.frequency }}MHz</span>
                      <span class="detail-item">强度: {{ result.strength }}dBm</span>
                      <span class="detail-item">位置: {{ result.location }}</span>
                    </div>
                  </div>

                  <div class="result-actions">
                    <el-button size="small" text @click.stop="analyzeResult(result)">
                      <el-icon><TrendCharts /></el-icon>
                      分析
                    </el-button>
                    <el-button size="small" text @click.stop="exportResult(result)">
                      <el-icon><Download /></el-icon>
                      导出
                    </el-button>
                  </div>
                </div>
              </div>

              <!-- 分页 -->
              <div class="results-pagination">
                <el-pagination
                  v-model:current-page="currentPage"
                  v-model:page-size="pageSize"
                  :page-sizes="[10, 20, 50, 100]"
                  :total="searchResults.length"
                  layout="total, sizes, prev, pager, next, jumper"
                  small
                />
              </div>
            </div>
          </el-tab-pane>

          <!-- 频谱分析 -->
          <el-tab-pane label="频谱分析" name="spectrum">
            <div class="spectrum-container">
              <div class="spectrum-header">
                <span class="spectrum-title">实时频谱</span>
                <div class="spectrum-controls">
                  <el-button size="small" @click="refreshSpectrum">
                    <el-icon><Refresh /></el-icon>
                  </el-button>
                  <el-button size="small" @click="toggleSpectrumFullscreen">
                    <el-icon><FullScreen /></el-icon>
                  </el-button>
                </div>
              </div>
              
              <!-- 频谱图表占位 -->
              <div class="spectrum-chart" ref="spectrumChartRef">
                <div class="chart-placeholder">
                  <el-icon class="placeholder-icon"><TrendCharts /></el-icon>
                  <div class="placeholder-text">频谱分析图表</div>
                  <div class="placeholder-desc">ECharts + WebGL 渲染</div>
                </div>
              </div>
            </div>
          </el-tab-pane>

          <!-- 威胁评估 -->
          <el-tab-pane label="威胁评估" name="threat">
            <div class="threat-container">
              <div class="threat-summary">
                <div class="threat-level" :class="threatLevel.level">
                  <div class="level-indicator"></div>
                  <div class="level-text">
                    <div class="level-name">{{ threatLevel.name }}</div>
                    <div class="level-desc">{{ threatLevel.description }}</div>
                  </div>
                </div>
              </div>

              <div class="threat-details">
                <div v-for="threat in threatList" :key="threat.id" class="threat-item">
                  <div class="threat-icon" :class="threat.severity">
                    <el-icon><Warning /></el-icon>
                  </div>
                  <div class="threat-info">
                    <div class="threat-name">{{ threat.name }}</div>
                    <div class="threat-desc">{{ threat.description }}</div>
                    <div class="threat-time">{{ formatTime(threat.detectTime) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>

        <!-- 面板调整器 -->
        <div
          class="panel-resizer right-resizer"
          @mousedown="startResize('right', $event)"
        ></div>
      </el-aside>
    </div>

    <!-- 底部状态栏 -->
    <div class="search-footer">
      <div class="status-left">
        <div class="status-item">
          <el-icon><Position /></el-icon>
          <span>{{ currentCoordinates.lon.toFixed(4) }}, {{ currentCoordinates.lat.toFixed(4) }}</span>
        </div>
        <div class="status-item">
          <el-icon><Timer /></el-icon>
          <span>{{ currentTime }}</span>
        </div>
      </div>

      <div class="status-right">
        <div class="status-item">
          <span>数据源连接:</span>
          <el-tag :type="connectionStatus === 'connected' ? 'success' : 'danger'" size="small">
            {{ connectionStatus === 'connected' ? '正常' : '断开' }}
          </el-tag>
        </div>
        <div class="status-item performance">
          <span>系统性能:</span>
          <span :class="performanceLevel">{{ performanceText }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { 
  Search, Download, Collection, VideoPlay, DataAnalysis, 
  Close, TrendCharts, Refresh, FullScreen, Warning,
  Position, Timer
} from '@element-plus/icons-vue'

// 导入子组件
import SearchBar from './components/search/SearchBar.vue'
import SpatialTemporalFilter from './components/search/SpatialTemporalFilter.vue'
import MapContainer from './components/search/MapContainer.vue'

// 面板尺寸控制 - 适应96vw总宽度的布局
const leftPanelWidth = ref('18vw')  // 调整左侧面板宽度适应96vw
const rightPanelWidth = ref('20vw') // 调整右侧面板宽度，地图区域约58vw
const rightActiveTab = ref('results')

// 搜索状态
const isRealTimeMode = ref(false)
const currentDrawMode = ref('')
const spatialFilter = reactive({})
const showResultsOverlay = ref(true)

// 当前坐标和时间
const currentCoordinates = reactive({ lon: 116.407526, lat: 39.904030 })
const currentTime = ref('')

// 统计数据
const totalDataCount = ref(1234567)
const matchedCount = ref(8542)
const searchTime = ref(156)
const coverageRange = ref('0.1-18GHz')

// 检索结果
const searchResults = ref([])
const selectedResult = ref(null)
const currentPage = ref(1)
const pageSize = ref(20)
const sortBy = ref('time_desc')

// 系统状态
const connectionStatus = ref('connected')
const performanceLevel = ref('good')

// 计算属性
const performanceText = computed(() => {
  return performanceLevel.value === 'good' ? '良好' : '一般'
})

const paginatedResults = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return searchResults.value.slice(start, end)
})

// 结果类型配置
const resultTypes = ref([
  { id: 'radar', name: '雷达信号', color: '#409EFF', count: 234 },
  { id: 'communication', name: '通信信号', color: '#67C23A', count: 156 },
  { id: 'jamming', name: '干扰信号', color: '#F56C6C', count: 89 },
  { id: 'unknown', name: '未知信号', color: '#E6A23C', count: 67 }
])

// 威胁评估
const threatLevel = ref({
  level: 'medium',
  name: '中等威胁',
  description: '检测到多个异常信号源'
})

const threatList = ref([
  {
    id: 1,
    name: '未知雷达信号',
    description: '在2.4GHz频段检测到异常雷达信号',
    severity: 'high',
    detectTime: Date.now() - 300000
  },
  {
    id: 2,
    name: '通信干扰',
    description: 'UHF频段存在持续干扰信号',
    severity: 'medium',
    detectTime: Date.now() - 600000
  }
])

// 模拟搜索结果数据
const initSearchResults = () => {
  const types = ['radar', 'communication', 'jamming', 'unknown']
  const locations = ['北京', '上海', '深圳', '广州', '成都']
  
  for (let i = 0; i < 100; i++) {
    searchResults.value.push({
      id: i + 1,
      type: types[Math.floor(Math.random() * types.length)],
      title: `信号源-${String(i + 1).padStart(3, '0')}`,
      frequency: (Math.random() * 10000).toFixed(2),
      strength: (-Math.random() * 100).toFixed(1),
      location: locations[Math.floor(Math.random() * locations.length)],
      timestamp: Date.now() - Math.random() * 86400000, // 24小时内随机时间
      description: '检测到的电磁信号数据...'
    })
  }
}

// 事件处理方法
const handleKeywordSearch = (params) => {
  console.log('关键词检索:', params)
  // 模拟搜索
  matchedCount.value = Math.floor(Math.random() * 5000) + 1000
  searchTime.value = Math.floor(Math.random() * 200) + 50
}

const handleAdvancedSearch = (params) => {
  console.log('高级检索:', params)
  // 模拟高级搜索
  matchedCount.value = Math.floor(Math.random() * 3000) + 500
  searchTime.value = Math.floor(Math.random() * 500) + 100
}

const handleIntelligentSearch = (params) => {
  console.log('智能检索:', params)
  // 模拟AI搜索
  matchedCount.value = Math.floor(Math.random() * 8000) + 2000
  searchTime.value = Math.floor(Math.random() * 1000) + 200
}

const handleSpatialChange = (params) => {
  console.log('空间过滤变化:', params)
  Object.assign(spatialFilter, params.filter || {})
  currentDrawMode.value = params.drawMode || ''
}

const handleTemporalChange = (params) => {
  console.log('时间过滤变化:', params)
}

const handleFilterApply = (filters) => {
  console.log('应用过滤器:', filters)
  // 重新执行搜索
  matchedCount.value = Math.floor(Math.random() * 4000) + 800
}

const handleCoordinatesChange = (coords) => {
  Object.assign(currentCoordinates, coords)
}

const handleDrawComplete = (result) => {
  console.log('绘制完成:', result)
}

const handleAreaSelected = (area) => {
  console.log('区域选择:', area)
}

// 结果操作
const selectResult = (result) => {
  selectedResult.value = result
}

const analyzeResult = (result) => {
  console.log('分析结果:', result)
  rightActiveTab.value = 'spectrum'
}

const exportResult = (result) => {
  console.log('导出结果:', result)
}

// 顶部操作
const exportResults = () => {
  console.log('导出所有结果')
}

const saveQuery = () => {
  console.log('保存查询条件')
}

const startRealTimeSearch = () => {
  isRealTimeMode.value = !isRealTimeMode.value
  console.log('实时检索模式:', isRealTimeMode.value)
}

// 频谱分析
const refreshSpectrum = () => {
  console.log('刷新频谱')
}

const toggleSpectrumFullscreen = () => {
  console.log('频谱全屏')
}

// 面板调整
let isResizing = false
let resizeType = null
let startX = 0
let startWidth = 0

const startResize = (type, event) => {
  isResizing = true
  resizeType = type
  startX = event.clientX
  startWidth = type === 'left' ? 
    parseFloat(leftPanelWidth.value) : 
    parseFloat(rightPanelWidth.value)

  document.addEventListener('mousemove', handleResize)
  document.addEventListener('mouseup', stopResize)
  document.body.style.cursor = 'col-resize'
}

const handleResize = (event) => {
  if (!isResizing) return

  const deltaX = event.clientX - startX
  const vwDelta = (deltaX / window.innerWidth) * 100

  if (resizeType === 'left') {
    const newWidth = Math.max(12, Math.min(30, startWidth + vwDelta))  // 调整范围：12vw-30vw (适应96vw总宽度)
    leftPanelWidth.value = `${newWidth}vw`
  } else if (resizeType === 'right') {
    const newWidth = Math.max(15, Math.min(30, startWidth - vwDelta))  // 调整范围：15vw-30vw (适应96vw总宽度)
    rightPanelWidth.value = `${newWidth}vw`
  }
}

const stopResize = () => {
  isResizing = false
  resizeType = null
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
  document.body.style.cursor = 'default'
}

// 工具方法
const formatNumber = (num) => {
  return num.toLocaleString()
}

const formatTime = (timestamp) => {
  return new Date(timestamp).toLocaleString('zh-CN')
}

const getTypeLabel = (type) => {
  const labels = {
    radar: '雷达',
    communication: '通信',
    jamming: '干扰',
    unknown: '未知'
  }
  return labels[type] || '其他'
}

// 定时更新当前时间
const updateCurrentTime = () => {
  currentTime.value = new Date().toLocaleString('zh-CN')
}

// 生命周期
onMounted(() => {
  initSearchResults()
  updateCurrentTime()
  
  // 定时更新时间
  const timeInterval = setInterval(updateCurrentTime, 1000)
  
  onUnmounted(() => {
    clearInterval(timeInterval)
  })
})
</script>

<style scoped>
/* 主容器 - 与导航栏共存显示 */
.multi-dimensional-search {
  width: 96vw !important;
  height: 100vh !important;
  background: #1f2d3d !important; /* 使用深色背景 */
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: absolute !important;
  top: 0 !important;
  left: 4vw !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  
  /* 覆盖Element Plus CSS变量 */
  --el-input-bg-color: rgba(45, 58, 75, 0.8);
  --el-input-border-color: #2d3a4b;
  --el-input-text-color: #bfcbd9;
  --el-input-placeholder-color: #8591a3;
  --el-input-focus-border-color: #409EFF;
  --el-select-input-color: #bfcbd9;
  --el-select-input-focus-border-color: #409EFF;
}

.search-header {
  height: 7vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2vw;
  background: linear-gradient(135deg, #263445, #1f2d3d); /* 使用深色渐变 */
  border-bottom: 1px solid #2d3a4b; /* 深色边框 */
  box-shadow: 0 0.2vh 0.8vh rgba(0, 0, 0, 0.3); /* 加深阴影 */
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 2vw;
}

.page-title {
  color: #bfcbd9;
  font-size: 1.8vw;
  font-weight: bold;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1vw;
}

.title-icon {
  color: #409EFF;
  font-size: 2vw;
}

.subtitle {
  display: flex;
  gap: 0.8vw;
}

.action-group {
  display: flex;
  gap: 0.5vw;
}

.search-content {
  flex: 1;
  display: flex;
  height: calc(100vh - 15vh); /* 调整计算高度：7vh(header) + 8vh(footer) = 15vh */
}

.search-panel {
  background: rgba(15, 23, 42, 0.8);
  border-right: 1px solid #2d3a4b;
  padding: 1.5vw;
  overflow-y: auto;
  position: relative;
}

.search-stats {
  background: rgba(31, 45, 61, 0.95);
  border-radius: 0.8vw;
  padding: 1.5vw;
  margin-top: 2vh;
}

.stats-header {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  margin-bottom: 1.5vh;
}

.stats-title {
  color: #bfcbd9;
  font-weight: bold;
  font-size: 1.1vw;
}

.stats-content {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-label {
  color: #8591a3;
  font-size: 0.9vw;
}

.stat-value {
  color: #bfcbd9;
  font-weight: bold;
  font-size: 0.9vw;
}

.stat-value.primary {
  color: #409EFF;
}

.map-area {
  flex: 1;
  padding: 1vw; /* 减少padding给地图更多空间 */
  position: relative;
  background: #1f2d3d; /* 确保背景一致 */
}

.search-overlay {
  position: absolute;
  top: 1.5vw;
  left: 20vw;
  z-index: 100;
  pointer-events: none;
}

.search-overlay > * {
  pointer-events: all;
}

.realtime-indicator {
  background: rgba(31, 45, 61, 0.95);
  border-radius: 0.4vw;
  padding: 0.6vh 1vw;
  display: flex;
  align-items: center;
  gap: 0.6vw;
  margin-bottom: 1vh;
  border: 1px solid #2d3a4b;
  width: 8vw;
  justify-content: center;
  font-size: 0.75vw;
}

.realtime-indicator.active {
  border-color: #67C23A;
}

.indicator-dot {
  width: 0.6vw;
  height: 0.6vw;
  border-radius: 50%;
  background: #8591a3;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.realtime-indicator.active .indicator-dot {
  background: #67C23A;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.indicator-text {
  color: #bfcbd9;
  font-size: 0.75vw;
  white-space: nowrap;
}

.results-overlay {
  background: rgba(31, 45, 61, 0.95);
  border-radius: 0.8vw;
  padding: 1.2vw;
  min-width: 16vw;
  max-width: 20vw;
  border: 1px solid #2d3a4b;
  box-shadow: 0 0.4vw 1.2vw rgba(0, 0, 0, 0.3);
}

.overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vh;
}

.overlay-title {
  color: #bfcbd9;
  font-weight: bold;
  font-size: 1vw;
}

.close-icon {
  color: #8591a3;
  cursor: pointer;
  font-size: 1.2vw;
}

.close-icon:hover {
  color: #bfcbd9;
}

.result-type {
  display: flex;
  align-items: center;
  gap: 0.6vw;
  margin-bottom: 0.6vh;
  padding: 0.2vh 0;
}

.type-indicator {
  width: 0.8vw;
  height: 0.8vw;
  border-radius: 50%;
  flex-shrink: 0;
}

.type-name {
  color: #bfcbd9;
  font-size: 0.85vw;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.type-count {
  color: #409EFF;
  font-weight: bold;
  font-size: 0.85vw;
  min-width: 2.5vw;
  text-align: right;
  flex-shrink: 0;
}

.results-panel {
  background: rgba(15, 23, 42, 0.8);
  border-left: 1px solid #2d3a4b;
  position: relative;
}

.panel-tabs {
  height: 100%;
}

:deep(.el-tabs__header) {
  background: rgba(31, 45, 61, 0.95);
  margin: 0;
}

:deep(.el-tabs__nav-wrap::after) {
  background: #2d3a4b;
}

:deep(.el-tabs__item) {
  color: #8591a3;
  font-size: 1vw;
}

:deep(.el-tabs__item.is-active) {
  color: #409EFF;
}

:deep(.el-tabs__active-bar) {
  background: #409EFF;
}

:deep(.el-tabs__content) {
  padding: 1.5vw;
  height: calc(100% - 6vh);
  overflow: hidden;
}

.results-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5vh;
  padding-bottom: 1vh;
  border-bottom: 1px solid #2d3a4b;
}

.results-count {
  color: #bfcbd9;
  font-size: 1vw;
}

.count-number {
  color: #409EFF;
  font-weight: bold;
}

.results-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 0.5vw;
}

.result-item {
  background: rgba(31, 45, 61, 0.6);
  border-radius: 0.6vw;
  padding: 1.5vh 1.5vw;
  margin-bottom: 1vh;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.result-item:hover {
  border-color: #409EFF;
  background: rgba(31, 45, 61, 0.8);
}

.result-item.active {
  border-color: #409EFF;
  background: rgba(64, 158, 255, 0.1);
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vh;
}

.result-type-badge {
  padding: 0.3vh 0.8vw;
  border-radius: 1vw;
  font-size: 0.8vw;
  color: #ffffff;
}

.result-type-badge.radar { background: #409EFF; }
.result-type-badge.communication { background: #67C23A; }
.result-type-badge.jamming { background: #F56C6C; }
.result-type-badge.unknown { background: #E6A23C; }

.result-time {
  color: #8591a3;
  font-size: 0.8vw;
}

.result-title {
  color: #bfcbd9;
  font-weight: bold;
  font-size: 1vw;
  margin-bottom: 0.8vh;
}

.result-details {
  display: flex;
  flex-wrap: wrap;
  gap: 1vw;
  margin-bottom: 1vh;
}

.detail-item {
  color: #8591a3;
  font-size: 0.8vw;
}

.result-actions {
  display: flex;
  gap: 0.8vw;
  justify-content: flex-end;
}

.results-pagination {
  margin-top: 1.5vh;
  padding-top: 1vh;
  border-top: 1px solid #2d3a4b;
}

.spectrum-container,
.threat-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.spectrum-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5vh;
}

.spectrum-title {
  color: #bfcbd9;
  font-weight: bold;
  font-size: 1.1vw;
}

.spectrum-controls {
  display: flex;
  gap: 0.5vw;
}

.spectrum-chart {
  flex: 1;
  background: rgba(31, 45, 61, 0.6);
  border-radius: 0.6vw;
  border: 1px solid #2d3a4b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.chart-placeholder {
  text-align: center;
  color: #8591a3;
}

.placeholder-icon {
  font-size: 4vw;
  margin-bottom: 1vh;
}

.placeholder-text {
  font-size: 1.2vw;
  margin-bottom: 0.5vh;
}

.placeholder-desc {
  font-size: 0.9vw;
}

.threat-summary {
  margin-bottom: 2vh;
}

.threat-level {
  background: rgba(31, 45, 61, 0.6);
  border-radius: 0.8vw;
  padding: 1.5vh 1.5vw;
  border: 1px solid #2d3a4b;
  display: flex;
  align-items: center;
  gap: 1.5vw;
}

.threat-level.low { border-left: 4px solid #67C23A; }
.threat-level.medium { border-left: 4px solid #E6A23C; }
.threat-level.high { border-left: 4px solid #F56C6C; }

.level-indicator {
  width: 1.5vw;
  height: 1.5vw;
  border-radius: 50%;
}

.threat-level.low .level-indicator { background: #67C23A; }
.threat-level.medium .level-indicator { background: #E6A23C; }
.threat-level.high .level-indicator { background: #F56C6C; }

.level-name {
  color: #bfcbd9;
  font-weight: bold;
  font-size: 1.1vw;
}

.level-desc {
  color: #8591a3;
  font-size: 0.9vw;
}

.threat-details {
  flex: 1;
  overflow-y: auto;
}

.threat-item {
  background: rgba(31, 45, 61, 0.6);
  border-radius: 0.6vw;
  padding: 1.5vh 1.5vw;
  margin-bottom: 1vh;
  border: 1px solid #2d3a4b;
  display: flex;
  gap: 1.5vw;
}

.threat-icon {
  width: 3vw;
  height: 3vw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5vw;
  color: #ffffff;
}

.threat-icon.high { background: #F56C6C; }
.threat-icon.medium { background: #E6A23C; }
.threat-icon.low { background: #67C23A; }

.threat-info {
  flex: 1;
}

.threat-name {
  color: #bfcbd9;
  font-weight: bold;
  font-size: 1vw;
  margin-bottom: 0.5vh;
}

.threat-desc {
  color: #8591a3;
  font-size: 0.9vw;
  margin-bottom: 0.5vh;
}

.threat-time {
  color: #8591a3;
  font-size: 0.8vw;
}

.panel-resizer {
  position: absolute;
  top: 0;
  width: 0.3vw;
  height: 100%;
  cursor: col-resize;
  background: transparent;
  z-index: 10;
}

.left-resizer {
  right: -0.15vw;
}

.right-resizer {
  left: -0.15vw;
}

.panel-resizer:hover {
  background: #409EFF;
}

.search-footer {
  height: 8vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2vw;
  background: linear-gradient(135deg, #263445, #1f2d3d); /* 与header保持一致 */
  border-top: 1px solid #2d3a4b;
  box-shadow: 0 -0.2vh 0.8vh rgba(0, 0, 0, 0.3); /* 上方阴影 */
}

.status-left,
.status-right {
  display: flex;
  gap: 2vw;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  color: #8591a3;
  font-size: 0.9vw;
}

.status-item .el-icon {
  color: #409EFF;
}

.performance.good {
  color: #67C23A;
}

.performance.normal {
  color: #E6A23C;
}

:deep(.el-button) {
  border-radius: 0.6vw;
  font-size: 1vw;
  padding: 1vh 1.5vw;
}

:deep(.el-tag) {
  border-radius: 1vw;
  font-size: 0.8vw;
}

:deep(.el-select) {
  width: auto;
}

:deep(.el-pagination) {
  justify-content: center;
}

:deep(.el-pagination .el-pager li) {
  background: rgba(31, 45, 61, 0.6);
  color: #bfcbd9;
}

:deep(.el-pagination .el-pager li.active) {
  background: #409EFF;
  color: #ffffff;
}

/* 统一输入框深色主题 - 使用更强的选择器 */
:deep(.el-input),
:deep(.el-input .el-input__wrapper),
:deep(.el-input .el-input__inner),
:deep(.el-select .el-input),
:deep(.el-select .el-input__wrapper),
:deep(.el-select .el-input__inner) {
  background: rgba(45, 58, 75, 0.8) !important;
  background-color: rgba(45, 58, 75, 0.8) !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

:deep(.el-input__inner),
:deep(.el-select .el-input__inner) {
  background: rgba(45, 58, 75, 0.8) !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

:deep(.el-input__inner:focus),
:deep(.el-select .el-input__inner:focus) {
  border-color: #409EFF !important;
  background: rgba(45, 58, 75, 0.9) !important;
}

:deep(.el-input__inner::placeholder),
:deep(.el-select .el-input__inner::placeholder) {
  color: #8591a3 !important;
}

:deep(.el-input__wrapper) {
  background-color: rgba(45, 58, 75, 0.8) !important;
  border-color: #2d3a4b !important;
}

:deep(.el-input__wrapper:hover) {
  border-color: #409EFF !important;
}

:deep(.el-input__wrapper.is-focus) {
  border-color: #409EFF !important;
}

:deep(.el-select-dropdown) {
  background: rgba(38, 52, 69, 0.95) !important;
  border-color: #2d3a4b !important;
}

:deep(.el-select-dropdown__item) {
  background: transparent !important;
  color: #bfcbd9 !important;
}

:deep(.el-select-dropdown__item:hover) {
  background: rgba(64, 158, 255, 0.2) !important;
  color: #409EFF !important;
}

:deep(.el-select-dropdown__item.selected) {
  background: #409EFF !important;
  color: #ffffff !important;
}

/* 额外的强制样式 */
:deep(input) {
  background: rgba(45, 58, 75, 0.8) !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

:deep(input::placeholder) {
  color: #8591a3 !important;
}
</style>